昨天我們將前端建置完成，今天我們接續補上細節，分別是:

• 上傳照片後產生預覽圖
• 將生成的顏色放置於旁邊

main-page.component.ts

首先在 component 內，我們引入 DomSanitizer，以防止在建立臨時 imgUrl 時的跨站點腳本安全漏洞（XSS）

export class MainPageComponent implements OnInit {

  file!: File;
  colorList!: string[];

  tempImgUrl: SafeUrl="";

  constructor(
    private sanitizer: DomSanitizer,
    private fileUploadService: FileUploadService
  ) { }

  ngOnInit(): void {
  }

  onChange(event:any) {
    this.file = event.target.files[0];
  }

  onUpload() {

    console.log(this.file);

    this.tempImgUrl = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(this.file));

    this.fileUploadService.upload(this.file).subscribe(
      (event: any) => {
        if (typeof (event) === 'object') {

          this.colorList = event;
          console.log(event);

        }
      }
    );
  }

  cleanColor(){
    this.colorList = [];
    this.tempImgUrl="";
  }

}

main-page.component.html

在 Model 內新增 img ，

<div class="modal-body" style="text-align: center ;">
    <div style="float: left ;">
        <img [src]="temImgUrl" alt="" style="width: 300px; ">
    </div>

    <div style="float: left ;">
        <div *ngFor="let color of colorList" style="width: 80px; height: 50px; margin: 10px; text-align: center;" [style.backgroundColor]="color">
            <b style="color: white;">{{color}}</b>
         </div>
     </div>
</div>

啟動測試與 Sprint Review

經修正後，我們可以一起來審視 Sprint 的目標:

完成前端 Angular 的程式撰寫，並且由前端向後端發送請求，將接收到的色碼轉換為顏色方塊

在這一期的 Sprint 完成幾個核心目標，如照片的上傳與顏色的獲取，生成預覽圖片等，然而因為 Prororype 並未提供參數化的規格，在實作上可能會與 Prororype 有些微落差，在後續的 Sprint 完成 Pipeline 後，則可以將調整畫面加入之後的目標內。

今日結語

到今天，我們終於完成了前後端初期的開發與連結測試，從明天起，我們開始進入 DevOps 的核心領域。而當我們完成了程式碼的開發後，程式碼的版本管控與多人協作甚至是程式對應的運行環境等問題與需求將會浮現，明天，我們先一起審視後續在 DevOps 上的流程及會運用的工具，再介紹 Git 和 Gitflow，並在 Gitlab 上面創建專案與分支，然後將原始碼推送上去。